{# form表单宏定义 #}

{# 分页html #}
{% macro pagination_html(pagination, is_row=True, all_check='') -%}
    {% if is_row %}
    <div class="row">
        <div class="col-lg-12">
            {{ build_pagination_html(pagination, all_check) }}
        </div>
    </div>
    {% else %}
        {{ build_pagination_html(pagination, all_check) }}
    {% endif %}
{%- endmacro %}


{# 生成分页html #}
{% macro build_pagination_html(pagination, all_check) %}
{% if all_check == 'yes' and pagination.total > 0 %}
    <div class="checkbox i-checks all_check" id="all_check" style="margin-left: 0.5%">
        <div class="icheckbox_square-green">
            <input type="checkbox" name="all_check">
            <ins class="iCheck-helper"></ins>
        </div>
        <i></i>全部
    </div>
    <script type="text/javascript">
        // 全部 选中
        $('div.checkbox.i-checks.all_check').on('ifChecked', function(event){
            $('.list-checkbox').iCheck('check');
        });
        // 全部 取消
        $('div.checkbox.i-checks.all_check').on('ifUnchecked', function(event){
            $('.list-checkbox').iCheck('uncheck');
            $('#id_list_str').val('');
        });
    </script>
{% endif%}
<div class="pull-right" id="pagination">
{% if pagination.total > 0 %}
    <div class="btn-group" style="padding-right:10px;">
        <a href="javascript:;" class="btn btn-white">{{ pagination.total }}条</a>
        {% if pagination.has_prev %}<a href="{{ pagination_href(pagination.prev_num) }}" class="btn btn-white"><i class="fa fa-chevron-left"></i></a>{% endif %}
        {% for page in pagination.iter_pages() %}
            {% if page %}
                {% if page != pagination.page %}
                    <a href="{{ pagination_href(page) }}" class="btn btn-white">{{ page }}</a>
                {% else %}
                   <a href="javascript:;" class="btn btn-primary active">{{ page }}</a>
                {% endif %}
            {% else %}
                <a href="javascript:void(0);" class="btn btn-white">…</a>
            {% endif %}
        {% endfor %}
        {% if pagination.has_next %}<a href="{{ pagination_href(pagination.next_num) }}" class="btn btn-white"><i class="fa fa-chevron-right"></i></a>{% endif %}
    </div>

    <div class="btn-group" style="padding-left:12px; border-left: 1px solid #ccc;">
        {{ pagination_change_page_size(20) }}
        {{ pagination_change_page_size(50) }}
        {{ pagination_change_page_size(100) }}
    </div>
{% else %}
    <p>暂无数据</p>
{% endif %}
</div>
{% endmacro %}


{% macro img(label, name, value='', placeholder='', type='file', required='', help='', disabled='',margin_right='1000px') %}
{% set errmsg = g['errmsg'] %}
{% set errmsg_text = errmsg.get(name, '') if errmsg else '' %}
{% set error_class = 'has-error' if errmsg_text else '' %}
<div class="form-group {{ name }}" style="margin-bottom: 1%;">
    <label class="col-lg-4 control-label" id="label-{{ name }}">{{ label }}</label>
    <div class="col-lg-8 {{error_class}}" id="control-{{ name }}">
        <a href="javascript:;" class="file" style="margin: 0%;">
        {% if disabled == 'yes' %}
        <input class="form-control " id="{{ name }}" name="{{ name }}" value="{{ value|string }}" placeholder="{{ placeholder }}" type="{{ type }}" {{ required }} onchange="previewFile(this)" disabled="disabled">选择文件
        {% else %}
        <input class="form-control " id="{{ name }}" name="{{ name }}" value="{{ value|string }}" placeholder="{{ placeholder }}" type="{{ type }}" {{ required }} onchange="previewFile(this)">选择文件
        {% endif %}
        </a>
        {% if  value %}
        <div class="lightBoxGallery img">
        {% else %}
        <div class="lightBoxGallery img" style="display: none;">
        {% endif %}
            <div class="col-lg-8 col-md-8 col-xs-8" style="padding-left: 0%;">
                <a href="{{ value|string }}" title="{{ label }}" data-gallery=""><img src="{{ value|string }}" style="max-width: 360px;margin-top: 1%;margin-right: {{ margin_right }};margin-left: 0px;">
                </a>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-4"  style="display: none;" id="cancel_img">
                <img src="http://qiniu.kapokcloud.com/03c170af-6b0d-451d-a22a-3ccdd020aa72.jpg" style="width: 30%;" onclick="javascript:cancel_img(this);">
            </div>
        </div>
        {% if help %}<span class="help-block m-b-none">{{ help|safe }}</span>{% endif %}
        {% if errmsg_text %}<span class="help-block m-b-none">{{ errmsg_text }}</span>{% endif %}
    </div>
</div>
<script language=javascript>
function previewFile(adom) {
    var objUrl = getObjectURL(adom.files[0]);
    $(adom).parents('a').siblings('div').find('img:eq(0)').attr('src', objUrl);
    $(adom).parents('a').siblings('div').find('a:eq(0)').attr('href', objUrl);
    $(adom).parents('a').siblings('div').find('#cancel_img').show();
    $(adom).parents('a').siblings('div').show();
}
function cancel_img(adom){
    $(adom).parents('#cancel_img:eq(0)').parents('.lightBoxGallery').siblings('a').find('input').val("");
    $(adom).parents('#cancel_img:eq(0)').hide();
    $(adom).parents('.lightBoxGallery').hide();
    $(adom).parents('#cancel_img:eq(0)').siblings('div').find('img').attr('src', '');
    $(adom).parents('#cancel_img:eq(0)').siblings('div').find('a').attr('href', '');
}
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
<style type="text/css">
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>
{% endmacro %}


{% macro video(label, name, value='', placeholder='', required='', help='', disabled='',margin_right='1000px') %}
{% set errmsg = g['errmsg'] %}
{% set errmsg_text = errmsg.get(name, '') if errmsg else '' %}
{% set error_class = 'has-error' if errmsg_text else '' %}
<div class="form-group {{ name }}" style="margin-bottom: 1%;">
    <label class="col-lg-4 control-label" id="label-{{ name }}">{{ label }}</label>
    <div class="col-lg-8 {{error_class}}" id="control-{{ name }}">
        <a href="javascript:;" class="video_file">
        {% if disabled == 'yes' %}
        <input class="form-control " id="{{ name }}" name="{{ name }}" value="{{ value|string }}" placeholder="{{ placeholder }}" type='file' {{ required }} onchange="video_previewFile(this)" disabled="disabled">选择文件
        {% else %}
        <input class="form-control " id="{{ name }}" name="{{ name }}" value="{{ value|string }}" placeholder="{{ placeholder }}" type='file' {{ required }} onchange="video_previewFile(this)">选择文件
        {% endif %}
        </a>
        <div class="lightBoxGallery" style="height: 100%;width: 100%;display: none;">
            <video controls="" name="media"><source src="{{ value|string }}"></video>
        </div>
        {% if help %}<span class="help-block m-b-none">{{ help|safe }}</span>{% endif %}
        {% if errmsg_text %}<span class="help-block m-b-none">{{ errmsg_text }}</span>{% endif %}
    </div>
</div>
<script language=javascript>
var source_src = $('input[id={{ name }}]').parents('a').siblings('div').find('source').attr('src');
if (source_src != ''){
    $('div.lightBoxGallery').show();
}
function video_previewFile(adom) {
    var file = adom.files[0];
    var reader = new FileReader();
    $(adom).parents('a').siblings('div').show();
    reader.onloadend = function () {
        $(adom).parents('a').siblings('div').find('source').attr('src', reader.result);
        $(adom).parents('a').siblings('div').find('video').attr('src', reader.result);
    }
    if (file) {
        reader.readAsDataURL(file);
    }
}
</script>
<style type="text/css">
.video_file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.video_file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.video_file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>
{% endmacro %}


{% macro get_ranking_diff(ranking, prev_ranking) %}
{% if ranking == 0 %}-
{% elif prev_ranking == 0 %}-
{% elif ranking == prev_ranking %}-
{% elif ranking > prev_ranking %}<i class="fa fa-long-arrow-down" style='color: #ed5565; padding-right: 5px;'></i>{{ ranking-prev_ranking }}
{% elif ranking < prev_ranking %}<i class="fa fa-long-arrow-up" style='color: #1c84c6; padding-right: 5px;'></i>{{ prev_ranking-ranking }}
{% endif %}
{% endmacro %}

{% macro datepicker(label, name, value='', placeholder='', type='', required='', help='', class='input-daterange') %}
{% set nvalue = value|toint %}
{% set str_date = value if nvalue == 0 else nvalue|format_timestamp('%Y-%m-%d') %}
<div class="form-group">
    <label class="col-lg-4 control-label">{{ label }}</label>
    <div class="col-lg-8">
        <div class="input-group {{class}}">
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
            <input type="text" class="form-control" value="{{ str_date }}" id="{{ name }}" name="{{ name }}" placeholder="{{ placeholder }}" {{ required }}>
            {% if help %}<span class="help-block m-b-none">{{ help }}</span>{% endif %}
        </div>
    </div>
</div>
<script type="text/javascript">
var myDate = new Date();
current_year = myDate.getFullYear();
current_month = myDate.getMonth()+1;
current_day = myDate.getDate();
$('#{{ name }}').attr('placeholder', '参考格式：'+ current_year+'-'+ current_month+'-'+current_day);
</script>
{% endmacro %}


{% macro monthpicker(label, name, value='', placeholder='', type='', required='', help='', id='sandbox-container') %}
{% set nvalue = value|toint %}
{% set str_date = value if nvalue == 0 else nvalue|format_timestamp('%Y-%m-%d') %}
<div class="form-group">
    <label class="col-lg-4 control-label">{{ label }}</label>
    <div class="col-lg-8">
        <div class="input-group" id="sandbox-container">
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
            <input type="text" class="form-control" value="{{ str_date }}" id="{{ name }}" name="{{ name }}" placeholder="{{ placeholder }}" {{ required }}>
            {% if help %}<span class="help-block m-b-none">{{ help }}</span>{% endif %}
        </div>
    </div>
</div>
{% endmacro %}


{% macro pagination_href(page, page_size=None) -%}
{% set page_size = page_size if page_size else request.view_args.get('page_size', None) %}
{{ url_for(request.endpoint, page=page, page_size=page_size) }}{% if request.query_string %}{{ '?' + request.query_string }}{% endif %}
{%- endmacro %}

{% macro pagination_change_page_size(page_size) -%}
{% set current_page_size = request.view_args.get('page_size', None) %}
{% if current_page_size == page_size %}<a href="javascript:;" class="btn btn-primary active">{{ page_size }}</a>
{% else %}<a href="{{ pagination_href(1, page_size) }}" class="btn btn-white">{{ page_size }}</a>
{% endif %}
{%- endmacro  %}


{# 搜索表单 #}
{% macro build_search_form(form_config, action="", method="GET") %}
<form class="form" action="{{ action }}" method="{{ method }}" id="search_form">
    <div class="row">
        {% set args = request.args %}
        {% for field in form_config %}
            {% set type = field.get('type', 'input') %}
            {% set name = field.get('name', '') %}
            {% set value = args.get(name, '') %}
            {% set remark = field.get('remark', '') %}

            {% set col_lg = field.get('col-lg', 'col-lg-2') %}

            {% if type == 'hidden' %}
                <input type="hidden" id="{{ name }}" name="{{ name }}" value="{{ value }}">
            {% else %}
            <div class="{{ col_lg }}">
                <div class="form-group">
                    <label>{{ field.get('label', ' ') }}</label>
                {% if type == 'input' %}
                    <input type="text" class="form-control" id="{{ name }}" name="{{ name }}" placeholder="{{ remark }}"  value="{{ value }}" >
                {% elif type == 'textarea' %}
                    <textarea class="form-control" id="{{ name }}" name="{{ name }}" >{{ value }}</textarea>
                {% elif type == 'select' %}
                    {% set options = field.get('options', []) %}
                    <select class="selectpicker form-control" name="{{ name }}" id="{{ name }}" size="1">
                        {% for option in options %}
                            {% set option_val = '%s' % option.get('value', '') %}
                            {% set selected = 'selected' if value == option_val else '' %}
                            <option value="{{ option_val }}" {{ selected }}>{{ option.get('name') }}</option>
                        {% endfor %}
                    </select>
                {% elif type == 'dbselect' %}
                    {% set options = field.get('options', []) %}
                    <select class="selectpicker form-control" name="{{ name }}" id="{{ name }}" size="1">
                        <option value="-1">请选择……</option>
                        {% for option in options %}
                            {% set option_val = '%s' % option.get('value', '') %}
                            {% set selected = 'selected' if value == option_val else '' %}
                            <option value="{{ option_val }}" {{ selected }}>{{ option.get('name') }}</option>
                        {% endfor %}
                    </select>
                {% elif type == 'monthpicker' %}
                    <!--<div class="input-daterange">
                        <input type="text" value="{{ args.get(name, '') }}" name="{{ name }}" class="form-control">
                    </div> -->
                    <input type="text" id="monthly" value="{{ value }}" name="{{ name }}" class="form-control input">
                    <script type="text/javascript">
                    function range(start,end){
                        var arr = [],
                        c = end - start + 1;
                        while ( c-- ) {
                            arr[c] = end--
                        }
                        return arr;
                    }
                    $(function(){
                        var current_year = new Date().getFullYear();
                        $('#monthpicker').monthpicker({
                            years: range(current_year, current_year+3),
                            topOffset: 12,
                            onMonthSelect: function(m, y) {
                              console.log('Month: ' + m + ', year: ' + y);
                            }
                        });
                        $('#monthly').monthpicker({
                            years: range(current_year, current_year + 3),
                            topOffset: 12,
                        })
                        $('div.monthpicker').insertAfter('input[id=monthly]');
                    });
                    </script>
                {% elif type == 'daterange' or  type == 'datetimepicker' %}
                    {% set begin_name = 'begin_'+name %}
                    {% set end_name = 'end_'+name %}
                    <div class="input-{{type}} input-group">
                        <input type="text" value="{{ args.get(begin_name, '') }}" name="{{ begin_name }}" class="form-control {{type}}">
                        <span class="input-group-addon">至</span>
                        <input type="text" value="{{ args.get(end_name, '') }}" name="{{ end_name }}" class="form-control {{type}}">
                    </div>
                {% elif type == 'three_level_selecter' %}
                    {% set value = field.get('value', '') %}
                    {% set level1_name = field.get('level1_name') if field.get('level1_name') else 0 %}
                    {% set level2_name = field.get('level2_name') if field.get('level2_name') else 0 %}
                    {% set level3_name = field.get('level3_name') if field.get('level3_name') else 0 %}
                    {{ three_level_selecter(level1_name=level1_name, level2_name=level2_name, level3_name=level3_name, value=value) }}
                {% endif %}
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>
    <div class="row"><div class="col-lg-12"><div class="hr-line-dashed"></div></div></div>
    <div class="row">
        <div class="col-lg-1">
            <div class="form-group">
                <button id="submit1" name="submit1" type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
$('#submit1').click(function(){
    $("#is_export").val(0);
    document.getElementById("search_form").submit();
});
</script>
{% endmacro %}


{# 创建三级下拉框 #}
{% macro three_level_selecter(level1_name='', level2_name='', level3_name='', value='') %}
<div class="form-group">
    <input type="hidden" id="db_level1_name" value="{{ level1_name }}">
    <input type="hidden" id="db_level2_name" value="{{ level2_name }}">
    <input type="hidden" id="db_level3_name" value="{{ level3_name }}">
    <input type="hidden" name="value" id="value" value="{{ value }}">
    <div class="row">
        {# 动态level1 #}
        <div class="col-lg-4" style="padding-right: 0%;">
            <select id="level1_name" name="level1_name" class="form-control">
            </select>
        </div>
        <div class="col-lg-4" style="padding-right: 2%;padding-left: 2%;">
            <select id="level2_name" name="level2_name" style="display:none;" class="form-control">
            </select>
        </div>
        <div class="col-lg-4" style="padding-left: 0%;">
            <select id="{{ level3_name }}" name="{{ level3_name }}" style="display:none;" class="form-control">
            </select>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
    var level1_name = $('#db_level1_name').val();
    var level2_name = $('#db_level2_name').val();
    var level3_name = $('#db_level3_name').val();
    var value = $('#value').val();
    if (level1_name && level2_name && level3_name || level1_name && level2_name){
        $.get('/sys/cat_name/show', {'level1_name':level1_name, 'level2_name':level2_name, 'level3_name':level3_name, 'value':value}, function(res){
            $('#level1_name').append(res.data.level1_html);
            $('#level2_name').show();
            $('#level2_name').append(res.data.level2_html);
            $('#{{ level3_name }}').show();
            $('#{{ level3_name }}').append(res.data.level3_html);
        });
    }else{
        $('#level2_name option').remove();
        $('#{{ level3_name }} option').remove();
        $('#{{ level3_name }}').hide();
        $('#level2_name').hide();
        $.get('/sys/cat_name/show', {'level1_name':level1_name}, function(res){
            $('#level1_name').append(res.data.level1_html);
            $('#level1_name').change();
        });
    }
});
$('#level1_name').change(function(){
    var level1_id = $('#level1_name').val();
    var selected_level2_name = $('#db_level2_name').val();
    $('#level2_name option').remove();
    $('#{{ level3_name }} option').remove();
    $('#{{ level3_name }}').hide();
    $('#level2_name').hide();
    if (!level1_id < 0) {
        return;
    }
    $.get('/sys/level_name/options', {'level1_id':level1_id, 'level2_name':selected_level2_name}, function(res){
        $('#level2_name').show();
        $('#level2_name').append(res.data.options_html);
    });
});
$('#level2_name').change(function(){
    var level2_id = $('#level2_name').val();
    var selected_level3_name = $('#db_level3_name').val();
    $('#{{ level3_name }} option').remove();
    $('#{{ level3_name }}').hide();
    if (!level2_id < 0) {
        return;
    }
    $.get('/sys/level_name/options', {'level2_id':level2_id, 'level3_name':selected_level3_name}, function(res){
        $('#{{ level3_name }}').append(res.data.options_html);
        $('#{{ level3_name }}').show();
    });
});
</script>
{% endmacro %}


{% macro input(label, name, value='', placeholder='', type='text', required='', help='', not_null="", disabled='') %}
{% set errmsg = g['errmsg'] %}
{% set errmsg_text = errmsg.get(name, '') if errmsg else '' %}
{% set error_class = 'has-error' if errmsg_text else '' %}
<div class="form-group">
    {% if not_null == 'yes' %}
    <label class="col-lg-4 control-label" id="label-{{ name }}"><span style="color: red;">*</span> {{ label }}</label>
    {% else %}
    <label class="col-lg-4 control-label" id="label-{{ name }}">{{ label }}</label>
    {% endif %}
    <div class="col-lg-8 {{error_class}}" id="control-{{ name }}">
        {% if disabled == 'yes' %}
            <input class="form-control " id="{{ name }}" name="{{ name }}" value="{{ value|string }}"
            placeholder="{{ placeholder }}" type="{{ type }}" {{ required }} onfocus=this.blur() readonly="true">
        {% else %}
            <input class="form-control " id="{{ name }}" name="{{ name }}" value="{{ value|string }}"
            placeholder="{{ placeholder }}" type="{{ type }}" {{ required }}>
        {% endif %}

        {% if help %}<span class="help-block m-b-none">{{ help|safe }}</span>{% endif %}
        {% if errmsg_text %}<span class="help-block m-b-none">{{ errmsg_text }}</span>{% endif %}
    </div>
</div>
{% endmacro %}


{% macro select(label, name, value='', option_list=[], size='1', required='', help='', disabled='', not_null='') %}
{% set errmsg = g['errmsg'] %}
{% set errmsg_text = errmsg.get(name, '') if errmsg else '' %}
{% set error_class = 'has-error' if errmsg_text else '' %}
<div class="form-group">
    {% if not_null == 'yes' %}
    <label class="col-lg-4 control-label"><span style="color: red;">*</span> {{ label }}</label>
    {% else %}
    <label class="col-lg-4 control-label">{{ label }}</label>
    {% endif %}
    <div class="col-lg-8 {{error_class}}">
        {% if disabled == 'yes' %}
        <select class="form-control" id="{{ name }}" name="{{ name }}" size="{{ size }}" {{ required }} onfocus=this.blur() readonly="true">
        {% else %}
        <select class="form-control" id="{{ name }}" name="{{ name }}" size="{{ size }}" {{ required }} {{ disabled }}>
        {% endif %}
        {% for option in option_list %}
            {% if option[1]|string == value|string %}
                <option value="{{ option[1] }}" selected="selected">{{ option[0] }}</option>
            {% else %}
                <option value="{{ option[1] }}">{{ option[0] }}</option>
            {% endif %}
        {% endfor %}
        </select>
        {% if help %}<span class="help-block m-b-none">{{ help }}</span>{% endif %}
        {% if errmsg_text %}<span class="help-block m-b-none">{{ errmsg_text }}</span>{% endif %}
    </div>
</div>
{% endmacro %}


{% macro dbselect(label, name, value='', option_list=[], att_name='', attr_value='', size='1', required='', help='', disabled='') %}
{% set errmsg = g['errmsg'] %}
{% set errmsg_text = errmsg.get(name, '') if errmsg else '' %}
{% set error_class = 'has-error' if errmsg_text else '' %}
<div class="form-group">
    <label class="col-lg-4 control-label">{{ label }}</label>
    <div class="col-lg-8 {{error_class}}">
        {% if disabled == 'yes'%}
        <select class="form-control" id="{{ name }}" name="{{ name }}" size="{{ size }}" {{ required }} onfocus=this.blur() readonly="true">
        {% else %}
        <select class="form-control" id="{{ name }}" name="{{ name }}" size="{{ size }}" {{ required }} {{ disabled }}>
        {% endif %}
            <option value="-1">请选择……</option>
        {% for option in option_list %}
            {% set val = option|getattr(attr_value) %}
            {% set selected = 'selected="selected"' if val|string == value|string else '' %}
            <option value="{{ val }}" {{selected}}>{{ option|getattr(att_name) }}</option>
        {% endfor %}
        </select>
        {% if help %}<span class="help-block m-b-none">{{ help }}</span>{% endif %}
        {% if errmsg_text %}<span class="help-block m-b-none">{{ errmsg_text }}</span>{% endif %}
    </div>
</div>
{% endmacro %}


{% macro textarea(label, name, value='', required='', disabled='', help='', height='100px') %}
{% set errmsg = g['errmsg'] %}
{% set errmsg_text = errmsg.get(name, '') if errmsg else '' %}
{% set error_class = 'has-error' if errmsg_text else '' %}
<div class="form-group">
    <label class="col-lg-4 control-label">{{ label }}</label>
    <div class="col-lg-8 {{error_class}}">
        {% if disabled == 'yes'%}
        <textarea id="{{ name }}" class="form-control" name="{{ name }}" {{ required }} style="height:{{ height }};max-width: 100%;min-height: 70px;" onfocus=this.blur() readonly="true">{{ value }}</textarea>
        {%  else %}
        <textarea id="{{ name }}" class="form-control" name="{{ name }}" {{ required }} style="height:{{ height }};max-width: 100%;min-height: 70px;">{{ value }}</textarea>
        {% endif %}
        {% if help %}<span class="help-block m-b-none">{{ help }}</span>{% endif %}
        {% if errmsg_text %}<span class="help-block m-b-none">{{ errmsg_text }}</span>{% endif %}
    </div>
</div>
<script type="text/javascript">
var s =  document.querySelectorAll("textarea");
for(var i =0; i<s.length;i++){
   s[i].style.height =  s[i].scrollHeight + 10+ 'px';
}
</script>
{% endmacro %}


{% macro form_label(label, value) %}
<div class="form-group">
    <label class="col-lg-4 control-label">{{ label }}</label>
    <div class="col-lg-8">
        <label class="form-control" style="border: none;">{{ value }}</label>
    </div>
</div>
{% endmacro %}

{# 创建地区列表 省-市-区/县 #}
{% macro build_region(label='地区', level=3, province='', city='', district='') %}
<div class="form-group">
    <input type="hidden" id="db_province" value="{{ province }}">
    <input type="hidden" id="db_city" value="{{ city }}">
    <input type="hidden" id="db_district" value="{{ district }}">
    <label class="col-lg-4 control-label">{{ label }}</label>
    <div class="col-lg-8">
        {# 动态加载省、城市 #}
        <select id="province" name="province">
        </select>

        {% if level >= 2 %}
        <select id="city" name="city" style="display:none;">
        </select>
        {% endif %}

        {% if level >= 3 %}
        <select id="district" name="district" style="display:none;">
        </select>
        {% endif %}
    </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
    var province = $('#db_province').val();
    var city     = $('#db_city').val();
    var district = $('#db_district').val();
    if (province && city && district || province && city){
        $.get('/sys/region_name/show', {'province':province,'region_type':1}, function(res){
            $('#province').append(res);
            $('#province').change();
            $('#city').show();
            $('#district').show();
        });
        $.get('/sys/region_name/show', {'city':city,'region_type':2}, function(res){
            $('#city').append(res);
        });
        $.get('/sys/region_name/show', {'district':district,'region_type':3}, function(res){
            $('#district').append(res);
        });
    }else{
        $('#city option').remove();
        $('#district option').remove();
        $('#city').hide();
        $('#district').hide();
        $.get('/sys/region/options', {'region_name':'中国',
                'db_value':province,'city':city,'province':province, 'region_type':0}, function(options_html){
            $('#province').append(options_html);
            $('#city').append(options_html);
            $('#district').append(options_html);
            $('#province').change();
        });
    }
});

{% if level >= 2 %}
// 省份变化
$('#province').change(function(){
    var province    = $('#province').val();
    var db_city = $('#db_city').val();
    $('#city option').remove();
    $('#district option').remove();
    $('#city').hide();
    $('#district').hide();

    if (!province) {
        return;
    }

    $.get('/sys/region/options', {'region_name':province,
            'db_value':db_city, 'region_type':1}, function(options_html){
        $('#city').append(options_html);
        $('#city').show();
        $('#city').change();
    });
});
{% endif %}

{% if level >= 3 %}
// 城市变化
$('#city').change(function(){
    var city    = $('#city').val();
    var db_district = $('#db_district').val();
    $('#district option').remove();
    $('#district').hide();

    if (!city) {
        return;
    }

    $.get('/sys/region/options', {'region_name':city,
            'db_value':db_district, 'region_type':2}, function(options_html){
        $('#district').append(options_html);
        $('#district').show();
    });
});
{% endif %}


</script>
{% endmacro %}


{% macro submit(btn='提交', id="submit") -%}
{% set errmsg = g['errmsg'] %}
{% set errmsg_text = errmsg.get('submit', '') if errmsg else '' %}
<div class="form-group">
    <div class="col-lg-4"></div>
    <div class="col-lg-8">
        {% if errmsg_text %}
        <div class="alert alert-warning">{{ errmsg_text|safe }}</div>
        {% endif %}
        <button type="submit" class="btn btn-primary" id="{{ id }}">{{ btn }}</button>
    </div>
</div>
<script type="text/javascript">
$('button#submit').click(function(){
    var $submit = $(this);
    var t = setTimeout(function(){
        $submit.prop('disabled', true)
    }, 100);
    var t1 = setTimeout(function(){
        $submit.prop('disabled', false);
    }, 4500);
});
</script>
{%- endmacro %}


{% macro timeago(current_time, before_time) %}
{% set diff_time = current_time - before_time %}
{% set diff_month = diff_time/(30*24*60*60)|int %}
{% set diff_days = diff_time/(24*60*60)|int %}
{{ diff_days }}天
{% endmacro %}


{% macro datetimepicker(label, name, value='', placeholder='', type='', required='', help='', disabled='',format='%Y-%m-%d %H:%M', not_null="") %}
{% set nvalue = value|toint %}
{% set str_date_time = '' if nvalue == 0 else nvalue|format_timestamp(format) %}
<div class="form-group">
    {% if not_null == 'yes' %}
    <label class="col-lg-4 control-label"><span style="color: red;">*</span> {{ label }}</label>
    {% else %}
    <label class="col-lg-4 control-label">{{ label }}</label>
    {% endif %}
    <div class="col-lg-8">
        <div class="input-group">
            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
            {%if disabled == 'yes'%}
            <input type="text" class="form-control datetimepicker" value="{{ str_date_time }}" id="{{ name }}" name="{{ name }}" placeholder="{{ placeholder }}" {{ required }} disabled="disabled" readonly="true">
            {% else %}
            <input type="text" class="form-control datetimepicker" value="{{ str_date_time }}" id="{{ name }}" name="{{ name }}" placeholder="{{ placeholder }}" {{ required }}>
            {% endif %}
            {% if help %}<span class="help-block m-b-none">{{ help }}</span>{% endif %}
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){

    });
</script>
{% endmacro %}


{% macro input_static(label, name, value='', placeholder='', type='text', margin_right='1000px') %}
<div class="form-group">
    {% if not_null == 'yes' %}
    <label class="col-lg-4 control-label" id="label-{{ name }}"><span style="color: red;">*</span> {{ label }}</label>
    {% else %}
    <label class="col-lg-4 control-label" id="label-{{ name }}">{{ label }}</label>
    {% endif %}
    <div class="col-lg-8 {{error_class}}" id="control-{{ name }}">
        {% if type== 'file'%}
        <div class="lightBoxGallery">
            <a href="{{ value|string }}" title="头 像" data-gallery=""><img src="{{ value|string }}" style="max-width: 280px;margin-top: 1%;margin-right: {{ margin_right }};margin-left: 0px;">
            </a>
        </div>
        {% else %}
        <p class="form-control-static">{{ value|string }}</p>
        {% endif %}
    </div>
</div>
{% endmacro %}


{# 搜索表单 #}
{% macro build_temp_search_form(form_config, action="", method="GET") %}
<form class="form" action="{{ action }}" method="{{ method }}" id="temp_search_form">
    <div class="row">
        {% set args = request.args %}
        {% for field in form_config %}
            {% set type = field.get('type', 'input') %}
            {% set name = field.get('name', '') %}
            {% set value = args.get(name, '') %}
            {% set col_lg = field.get('col-lg', 'col-lg-3') %}

            {% if type == 'hidden' %}
                <input type="hidden" id="{{ name }}" name="{{ name }}" value="{{ value }}">
            {% else %}
            <div class="{{ col_lg }}" style="margin-right: 3%;">
                <div class="form-group">
                    <label>{{ field.get('label', ' ') }}</label>
                {% if type == 'input' %}
                    <input type="text" class="form-control" id="{{ name }}" name="{{ name }}" value="{{ value }}" >

                {% elif type == 'textarea' %}
                    <textarea class="form-control" id="{{ name }}" name="{{ name }}" >{{ value }}</textarea>

                {% elif type == 'select' %}
                    {% set options = field.get('options', []) %}
                    <select class="selectpicker form-control" name="{{ name }}" id="{{ name }}" size="1">
                        {% for option in options %}
                            {% set option_val = '%s' % option.get('value', '') %}
                            {% set selected = 'selected' if value == option_val else '' %}
                            <option value="{{ option_val }}" {{ selected }}>{{ option.get('name') }}</option>
                        {% endfor %}
                    </select>
                {% elif type == 'daterange' or  type == 'datetimepicker' %}
                    {% set begin_name = 'begin_'+name %}
                    {% set end_name = 'end_'+name %}
                    <div class="input-{{type}} input-group">
                        <input type="text" value="{{ args.get(begin_name, '') }}" name="{{ begin_name }}" class="form-control {{type}}">
                        <span class="input-group-addon">至</span>
                        <input type="text" value="{{ args.get(end_name, '') }}" name="{{ end_name }}" class="form-control {{type}}">
                    </div>
                {% endif %}
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>
    <div class="row"><div class="col-lg-12"><div class="hr-line-dashed"></div></div></div>
    <div class="row">
        <div class="col-lg-1 col-lg-offset-10">
            <div class="form-group">
                <button id="submit1" name="submit1" type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</form>
{% endmacro %}
